<template>

  <div class="playing">
    <div class="bg1" v-if="!singlesong.al"></div>
    <div class="bg" v-else :style="{ backgroundImage: `url(${singlesong.al.picUrl})` }"></div>
    <div class="top">
      <div class="top-left" @click="clickTohidePlaying"><svg t="1650029631907" class="icon" viewBox="0 0 1024 1024"
          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2582" width="16" height="16">
          <path
            d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
            fill="" p-id="2583"></path>
        </svg></div>
      <div class="top-center">
        <div class="title">
          <marquee v-if="singlesong" scrollamount=2 behavior="scroll" direction="left">
            {{ singlesong.name }}
          </marquee>
          <marquee v-else scrollamount=2 behavior="scroll" direction="left">
            我叫高山我梦
          </marquee>
        </div>
        <div class="author" v-if="!singlesong.ar">高山我梦</div>
        <div class="author" v-else="singlesong.ar[0].name">{{ singlesong.ar[0].name }}</div>
      </div>
      <div class="top-right"></div>
    </div>
    <div class="content" v-if="!showlyric">
      <img class="needle" src="@/assets/img/shoubing.png" alt="">
      <img class="yuan" src="@/assets/img/heijiao.png" alt="">
      <img class="tu " :class="{ 'detail-play-run': !pause }" v-if="singlesong.al" :src="singlesong.al.picUrl" alt="" />
      <img class="tu " :class="{ 'detail-play-run': !pause }" v-else src="../../assets/gaia.png" alt="" />
    </div>
    <div class="lyric" v-if="showlyric">
      <p v-for="(item, index) in  musicStore.lyricsList" :key="index">{{ item.lyric }}</p>
    </div>
    <!-- 切换歌词 -->
    <div class="toggleLyric">
      <svg @click="toggleLyric" t="1650118854297" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="1976" width="16" height="16">
        <path
          d="M512 0c282.766222 0 512 229.233778 512 512s-229.233778 512-512 512S0 794.766222 0 512 229.233778 0 512 0z m0 64C264.590222 64 64 264.590222 64 512S264.590222 960 512 960 960 759.409778 960 512 759.409778 64 512 64z m262.826667 183.694222V727.04c0 29.411556-6.883556 43.804444-25.656889 51.313778-20.024889 8.135111-53.191111 8.760889-103.879111 8.760889-2.503111-12.515556-9.386667-34.417778-15.644445-46.307556 38.172444 1.877333 75.093333 1.251556 86.357334 0.625778 10.638222 0 14.392889-3.754667 14.392888-14.392889V290.872889h-300.373333V247.694222H774.826667z m-408.007111 163.953778v263.452444l64.455111-45.056c3.128889 12.515556 10.012444 30.037333 13.767111 38.798223-98.929778 73.898667-118.414222 88.206222-128.142222 100.209777l-1.393778 1.792c-5.006222-9.386667-18.147556-25.031111-26.282667-31.914666 11.889778-9.386667 33.792-32.540444 33.792-63.829334v-219.022222H230.4v-44.430222h136.419556z m288.483555 43.804444v198.997334H512v41.927111h-41.927111v-240.924445h185.230222z m-41.927111 40.049778H512v118.272h101.376V495.502222z m71.964444-142.677333v40.049778h-239.672888v-40.049778h239.672888zM297.984 235.804444c33.166222 28.16 75.719111 66.958222 95.744 92.615112l-31.288889 32.540444c-18.773333-26.282667-60.700444-67.584-94.492444-96.369778z"
          p-id="1977"></path>
      </svg>
    </div>
    <!-- 切换歌词 -->
    <div class="progress"></div>
    <div class="footer">
      <div class="loop"><svg t="1650091312790" class="icon" viewBox="0 0 1129 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="4243" width="32" height="32">
          <path
            d="M534.30663162 141.21142578c48.22326216 0 94.89251824 9.17681444 139.98050447 27.30688532 46.29302302 18.69169391 87.23154037 45.88407362 122.85917475 81.35358118 0.17993747 0.21810623 36.48915296 35.57310746 108.91128832 106.38670987V215.42203159c0-10.19646056 3.6532777-19.02975822 10.89440053-26.28178672 7.29019655-7.2520285 16.04170491-10.87804238 26.30904983-10.87804311 10.25643997 0 18.99159017 3.62601388 26.28723991 10.87804311 7.25748098 7.2520285 10.89440053 16.08532614 10.89440053 26.28178671V437.83574204c0 10.30551368-3.63691957 19.02975822-10.89440053 26.28178671-7.29564975 7.2520285-16.03079922 10.88349487-26.28723991 10.88349487h-223.06802846c-10.25643997 0-19.00794759-3.62601388-26.29814487-10.87804239-7.2520285-7.2520285-10.88349487-15.97627302-10.88349558-26.28723919 0-10.19646056 3.63691957-18.92070582 10.88349558-26.17273359 7.29019655-7.2520285 16.04170491-10.87804238 26.29814487-10.87804238h125.46554253c-53.8285889-52.2309616-87.51507848-84.97414259-101.06492123-98.57305906-28.86634457-28.66459648-61.65314611-50.41522877-98.45855274-65.14829625-35.42043311-14.504057-72.70567348-21.64157918-111.7957417-21.64157918-39.10097392 0-76.38621428 7.14297537-111.8066474 21.64703166-36.98534411 14.72216251-69.80486193 36.478248-98.46945841 65.14284377-28.63733266 28.66459648-50.4043231 61.41322923-65.33368619 98.23499402-14.55313072 35.34954876-21.78880107 72.51483033-21.78880106 111.59944681 0 38.97556265 7.23567035 76.14084494 21.78880106 111.49039299 14.9293638 36.82176479 36.69635352 69.57039827 65.33368619 98.12048843 28.66459648 28.77910208 61.48411358 50.52973436 98.47491089 65.14829622 35.41498063 14.61310939 72.70022101 21.75608477 111.80119491 21.7560855 39.09552143 0 76.37530861-7.14297537 111.7957417-21.7560855 36.80540664-14.61310939 69.59220889-36.36919489 98.45855275-65.14829622 32.137936-32.06159918 55.5734381-69.00332204 70.29560061-110.92331748 3.27159142-9.62938507 9.59121628-16.65240166 18.86617963-20.95999736 9.29677323-4.3075957 18.77348393-4.87467193 28.46284767-1.70122794 9.70572188 3.51150829 16.77781292 9.97290185 21.18355607 19.14971702 4.47662822 9.29132076 4.95646123 18.8116527 1.47221674 28.44103702-8.90963447 25.26214058-20.95454488 50.07716374-36.16199431 74.21060582-15.21290118 24.13344133-32.39966349 45.54600933-51.56573793 64.24315643-35.62763366 35.57310746-76.56615175 62.7654872-122.85917475 81.46263357C629.19369738 873.70990722 582.52989376 882.77221608 534.30663162 882.77221608c-48.22326216 0-94.89251824-9.06230884-139.98050448-27.19237974-46.29302302-18.69714638-87.24244605-45.88952683-122.85917404-81.46263357-35.60582304-35.46405435-62.84727723-76.36440367-81.62621361-122.48294169C171.6506892 606.65532727 162.54475911 560.08421934 162.54475911 512.04634784c0-48.14692461 9.10047761-94.71803325 27.29598038-139.69696708 18.77893641-46.11853803 45.97676932-86.90438173 81.62621361-122.48294096 35.61127625-35.46405435 76.56615175-62.6509816 122.85917404-81.4626343C439.41956656 150.27373462 486.08337018 141.21142578 534.30663162 141.21142578z"
            p-id="4244" fill="#dbdbdb"></path>
        </svg></div>
      <div class="pre" @click="togglePreOrNext('pre')"><svg t="1650085000342" class="icon" viewBox="0 0 1024 1024"
          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2886" width="16" height="16">
          <path
            d="M512 62.389956c-248.312412 0-449.610044 201.297632-449.610044 449.610044s201.297632 449.610044 449.610044 449.610044 449.610044-201.297632 449.610044-449.610044S760.312412 62.389956 512 62.389956zM786.507004 786.507004c-35.672454 35.672454-77.196173 63.672158-123.416867 83.222423-47.821145 20.22667-98.655927 30.482245-151.09116 30.482245-52.435233 0-103.270015-10.255575-151.09116-30.482245-46.220694-19.549242-87.744413-47.549969-123.416867-83.222423-35.672454-35.672454-63.672158-77.196173-83.222423-123.416867-20.22667-47.821145-30.482245-98.655927-30.482245-151.090137 0-52.435233 10.255575-103.270015 30.482245-151.09116 19.549242-46.220694 47.549969-87.744413 83.222423-123.416867 35.672454-35.672454 77.196173-63.672158 123.416867-83.222423 47.821145-20.22667 98.654904-30.482245 151.09116-30.482245 52.435233 0 103.268992 10.255575 151.09116 30.482245 46.220694 19.549242 87.744413 47.549969 123.416867 83.222423 35.672454 35.672454 63.672158 77.196173 83.222423 123.416867 20.22667 47.821145 30.482245 98.655927 30.482245 151.09116 0 52.435233-10.255575 103.268992-30.482245 151.090137C850.179163 709.310831 822.179458 750.83455 786.507004 786.507004zM575.653739 507.980453 308.169685 305.667701c-3.094478-1.786693-6.961552 0.446162-6.961552 4.019547l0 404.625504c0 3.572362 3.868097 5.806239 6.961552 4.019547l267.484054-202.312752C578.747193 514.232854 578.747193 509.767146 575.653739 507.980453zM718.151174 306.049395l-92.229564 0c-2.563382 0-4.640694 2.365884-4.640694 5.28333l0 401.334551c0 2.917446 2.078335 5.28333 4.640694 5.28333l92.229564 0c2.563382 0 4.640694-2.365884 4.640694-5.28333L722.791867 311.332724C722.791867 308.415278 720.714556 306.049395 718.151174 306.049395z"
            p-id="2887"></path>
        </svg></div>
      <div class="play" @click="play" v-if="pause"><svg t="1650085022087" class="icon" viewBox="0 0 1024 1024"
          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3685" width="14" height="14">
          <path
            d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
            p-id="3686"></path>
          <path
            d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
            p-id="3687"></path>
        </svg></div>
      <div class="stopplay" @click="play" v-else><svg t="1650089477156" class="icon" viewBox="0 0 1024 1024"
          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2094" width="16" height="16">
          <path
            d="M512 1024C228.266667 1024 0 795.733333 0 512S228.266667 0 512 0s512 228.266667 512 512-228.266667 512-512 512z m0-42.666667c260.266667 0 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333z m-106.666667-682.666666c12.8 0 21.333333 8.533333 21.333334 21.333333v384c0 12.8-8.533333 21.333333-21.333334 21.333333s-21.333333-8.533333-21.333333-21.333333V320c0-12.8 8.533333-21.333333 21.333333-21.333333z m213.333334 0c12.8 0 21.333333 8.533333 21.333333 21.333333v384c0 12.8-8.533333 21.333333-21.333333 21.333333s-21.333333-8.533333-21.333334-21.333333V320c0-12.8 8.533333-21.333333 21.333334-21.333333z"
            p-id="2095"></path>
        </svg></div>
      <div class="next" @click="togglePreOrNext('next')"> <svg t=" 1650084987815" class="icon" viewBox="0 0 1024 1024"
          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2746" width="16" height="16">
          <path
            d="M512 62.389956c-248.312412 0-449.610044 201.297632-449.610044 449.610044s201.297632 449.610044 449.610044 449.610044 449.610044-201.297632 449.610044-449.610044S760.312412 62.389956 512 62.389956zM786.507004 786.507004c-35.672454 35.672454-77.196173 63.672158-123.416867 83.222423-47.821145 20.22667-98.655927 30.482245-151.09116 30.482245-52.435233 0-103.270015-10.255575-151.09116-30.482245-46.220694-19.549242-87.744413-47.549969-123.416867-83.222423-35.672454-35.672454-63.672158-77.196173-83.222423-123.416867-20.22667-47.821145-30.482245-98.655927-30.482245-151.090137 0-52.435233 10.255575-103.270015 30.482245-151.09116 19.549242-46.220694 47.549969-87.744413 83.222423-123.416867 35.672454-35.672454 77.196173-63.672158 123.416867-83.222423 47.821145-20.22667 98.654904-30.482245 151.09116-30.482245 52.435233 0 103.268992 10.255575 151.09116 30.482245 46.220694 19.549242 87.744413 47.549969 123.416867 83.222423 35.672454 35.672454 63.672158 77.196173 83.222423 123.416867 20.22667 47.821145 30.482245 98.655927 30.482245 151.09116 0 52.435233-10.255575 103.268992-30.482245 151.090137C850.179163 709.310831 822.179458 750.83455 786.507004 786.507004zM575.653739 507.980453 308.169685 305.667701c-3.094478-1.786693-6.961552 0.446162-6.961552 4.019547l0 404.625504c0 3.572362 3.868097 5.806239 6.961552 4.019547l267.484054-202.312752C578.747193 514.232854 578.747193 509.767146 575.653739 507.980453zM718.151174 306.049395l-92.229564 0c-2.563382 0-4.640694 2.365884-4.640694 5.28333l0 401.334551c0 2.917446 2.078335 5.28333 4.640694 5.28333l92.229564 0c2.563382 0 4.640694-2.365884 4.640694-5.28333L722.791867 311.332724C722.791867 308.415278 720.714556 306.049395 718.151174 306.049395z"
            p-id="2747"></path>
        </svg>
      </div>
      <div class="list"><svg t="1650090996329" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2576" width="13" height="13">
          <path
            d="M902.779659 795.440467c-6.179746-6.181793-14.304797-9.577123-22.950711-9.577123L129.341299 785.863345c-17.945721 0-32.540114 14.59644-32.540114 32.525788 0 17.962094 14.594393 32.555463 32.540114 32.555463l750.487649 0c17.931395 0 32.525788-14.594393 32.525788-32.555463C912.354735 809.745265 908.959406 801.61919 902.779659 795.440467"
            p-id="2577"></path>
          <path
            d="M879.828948 461.055724 129.341299 461.055724c-17.945721 0-32.525788 14.594393-32.525788 32.541137 0 17.930371 14.580067 32.525788 32.525788 32.525788l750.487649 0c17.931395 0 32.525788-14.594393 32.525788-32.525788 0-8.647961-3.39533-16.800641-9.575076-22.980387C896.599913 464.436728 888.474862 461.055724 879.828948 461.055724"
            p-id="2578"></path>
          <path
            d="M902.779659 154.426115c-6.179746-6.179746-14.304797-9.574053-22.950711-9.574053L129.341299 144.852062c-17.945721 0-32.540114 14.594393-32.540114 32.540114 0 17.946744 14.594393 32.525788 32.540114 32.525788l750.487649 0c17.931395 0 32.525788-14.579043 32.525788-32.525788C912.354735 168.745239 908.959406 160.606885 902.779659 154.426115"
            p-id="2579"></path>
        </svg></div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, defineEmits, } from 'vue';
import { homeStore } from '@/store/home.js'
import { storeToRefs } from 'pinia'
import { musicplaycontrolStore } from '@/store/playcontrol.js'
import { songDetail } from "@/api/index"
// 引入两个仓库
const store = homeStore();
const musicStore = musicplaycontrolStore()
const { playsongid, singlesong } = storeToRefs(store)
const { pause } = storeToRefs(musicStore)
musicStore.asyncrequestLyric(store.playsongid)
const emits = defineEmits(['changeshow'])
// 是否展示歌词
const showlyric = ref(false)
const toggleLyric = () => {
  console.log(showlyric.value);
  showlyric.value = !showlyric.value
}
// 点击播方按钮
let play = () => {
  if (!store.singlesong.id) {
    console.log(1);
    return
  }
  if (!playsongid) {
    pause.value = true;
    return
  }
  if (pause.value == true) {
    musicStore.$patch({
      pause: false
    })
  }
  else {
    musicStore.$patch({
      pause: true
    })
  }
}
// 点击隐藏播放界面
const clickTohidePlaying = () => {
  emits('changeshow', false)
}
//点击切换上下首
let togglePreOrNext = async (flag) => {
  if (flag == 'pre') {
    //拿到当前id然后把当前播放音乐切换为列表中的下一首    
    // 因为推荐歌单的歌曲结果和搜出来的歌单列表不一样,所以得把歌单的id拿出去搜搜得到统一的当前播放对象
    if (store.playCurrentIndex == 0) return
    let res = await songDetail(store.playlist[store.playCurrentIndex - 1].id)
    store.singlesong = res.data.songs[0]
    store.playCurrentIndex--
    // 重新请求歌词
    musicStore.asyncrequestLyric(store.singlesong.id)
  } else {
    console.log(store.singlesong);
    let res = await songDetail(store.playlist[store.playCurrentIndex + 1].id)
    store.singlesong = res.data.songs[0]
    store.playCurrentIndex++
    musicStore.asyncrequestLyric(store.singlesong.id)
  }
}
</script>

<style lang="less" scoped>
.playing {
  z-index: 3;
  position: fixed;
  left: 0;
  top: 0;
  // width: 100vw;
  height: 100vh;
  background-color: black;
  width: 7.5rem;

  background-color: rgba(255, 255, 255, 1.6);

  .toggleLyric {
    position: absolute;
    display: flex;
    width: 7.5rem;
    height: 0.5rem;
    color: #ccc;

    justify-content: center;
    bottom: 1.6rem;
    font-size: 0.4rem;

  }

  .bg {
    width: 7.5rem;
    position: absolute;
    left: 0;
    top: 0;
    // width: 100vw;
    height: 100vh;
    z-index: -1;
    background-size: auto 100%;
    filter: blur(0.5rem);
    background-position: center;


  }

  .lyric {
    color: #fff; // background-color: rgba(0, 0, 0, 0.2);
    font-size: 0.4rem;
    font-weight: 500;
    text-align: center;
    line-height: 0.66rem;
    overflow: scroll;
    z-index: 10;
    position: absolute;
    width: 7.5rem;
    height: 7.5rem;
    left: 0;
    top: 1.9rem;
    padding: 0.3rem 0.35rem;
    // background-color: red;
  }

  .content {
    z-index: 8;
    position: absolute;
    width: 7.5rem;
    // height: 10.5rem;
    left: 0;
    top: 1.5rem;
    // background-color: red;

    .needle {
      position: absolute;
      left: 50%;
      width: 1.5rem;
      height: auto;
      top: 0.4rem;
      margin-left: -0.25rem;
      z-index: 2;
      transform-origin: 0rem 0;
      transform: rotate(-25deg);
      transition: all 1s;
    }

    .needle .active {
      position: absolute;
      left: 50%;
      width: 1.5rem;
      height: auto;
      top: 0.4rem;
      margin-left: -0.25rem;
      z-index: 2;
      transform-origin: 0rem 0;
      transform: rotate(-28deg);
      transition: all 1s;
    }

    .tu {

      position: absolute;
      left: 50%;
      top: 2rem;
      width: 4rem;
      height: auto;
      margin-left: -2rem;
      border-radius: 50%;
      animation: 10s linear move infinite;
      animation-play-state: paused;
    }

    .detail-play-run {
      animation-play-state: running;
    }

    @keyframes move {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .yuan {
      z-index: 1;
      position: absolute;
      left: 50%;
      top: 1.5rem;
      width: 5rem;
      height: auto;
      margin-left: -2.5rem;

    }

  }

  .footer {
    width: 7.5rem;
    position: absolute;
    height: 1.5rem;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;

    svg {
      color: #ccc;
      width: 0.5rem;
      height: 0.5rem;
    }
  }

  .top {
    color: white;
    position: absolute;
    margin-top: 0.2rem;
    left: 0;
    top: 0;
    width: 7.5rem;
    display: flex;
    height: 1rem;
    // justify-content: space-between;
    align-items: center;

    .top-left {
      margin-left: 0.2rem;

      svg {
        width: 0.5rem;
        height: 0.5rem;
      }
    }

    .top-center {
      width: 7rem;
      margin-left: 0.3rem;

      .title {
        font-size: 0.33rem;
        width: 2rem;
        padding-right: 0.1rem;
      }

      .author {
        font-size: 0.2rem;
        color: gray;
      }
    }

    .top-right {
      width: 0.5rem;

    }
  }
}

.bg1 {
  background-image: url('../../assets/gaia.png');
  width: 7.5rem;
  position: absolute;
  left: 0;
  top: 0;
  // width: 100vw;
  height: 100vh;
  z-index: -1;
  background-size: auto 100%;
  filter: blur(0.07rem);
  background-position: center;
}

.toggleLyric {
  z-index: 30;
}
</style>
 